<template>
  <div class="tab-control">
    <div v-for="(item,index) in titles"
         class="tab-control-item"
         :class="{'btn-tab':index === currentIndex}"
         @click="itemClick(index)">
      <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TabControl",
    data(){
      return {
        currentIndex:0,
        titles:['全部传球','传中球','直传球','长传球','关键球']
      }
    },
    methods:{
      itemClick(index){
        this.currentIndex = index
        this.$emit('changePass',index)
      }
    }
  }
</script>

<style scoped>
 .tab-control {
   height: 380px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;

 }
 .tab-control-item {
   width: 100px;
   height: 40px;
   border-radius: 5px;
   line-height: 40px;
   background-color: #FFFAFA;
   border: 1px solid rgba(52,131,168,0.72);
   color: black;
   box-shadow:0 0 2px 0 rgba(0,199,255,1)
 }
 .btn-tab {
   background-color: #9EE4F7;
 }
</style>